<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="XAdmin/commons/header"></div>

<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">预定信息</a>
                <a>
                    <cite>预定列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div id="app" class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">

                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="预约时间" id="reserveTime" name="reserveTime">
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="微信昵称" name="nickname">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="预约人" name="name">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="手机号" name="phone">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="身份证号码" name="idcard">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" type="button" lay-filter="sreach" data-type="reload"
                                    onclick="reload()">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <br>
                <!--                <div class="layui-card-header">-->
                <!--                    <button style="float: right;margin-right: 1%" class="layui-btn"-->
                <!--                            onclick="xadmin.open('添加用户','user_add','1000')"><i-->
                <!--                            class="layui-icon"></i>添加用户-->
                <!--                    </button>-->
                <!--                </div>-->
                <div class="layui-card-body ">
                    <table class="layui-table" id="test" lay-filter="test">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    const vm = new Vue({
        el: "#app",
        data: {
            urlPrefix: ""
            // urlPrefix: $baseUrl + 'file/viewUploadFile?id='
        },
        methods: {},
        computed: {}
    });


    layui.use(['laydate', 'form'],
        function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#reserveTime', //指定元素
                trigger: 'click',
                type: 'date',
            });
        });

    layui.use('table', function () {
        table = layui.table;
        //方法级渲染
        var t1 = table.render({
            elem: '#test',
            url: $baseUrl + 'reserveItem/findReserveItemList',
            where: {
                userId: $userId,
            },
            headers: {
                token: $token
            },
            cols: [[
                {
                    field: 'nickname',
                    title: '微信昵称',
                    width: '11%',
                    fixed: 'left'
                }, {
                    field: 'avatar',
                    title: '头像',
                    templet: function (item) {
                        if (item.avatar == null || item.avatar === '' || item.avatar === undefined) {
                            return '<a target="_blank" href="' + $baseUrl + 'XAdmin/images/default_user.png"><img width="30px" height="30px" src="' + $baseUrl + 'XAdmin/images/default_user.png">';
                        } else {
                            return '<a target="_blank" href="' + vm.urlPrefix + item.avatar + '"><img width="30px" height="30px" src="' + vm.urlPrefix + item.avatar + '"></a>';
                        }

                    },
                    fixed: 'left',
                    width: '6%',
                    align: 'center'
                }
                , {
                    field: 'name',
                    title: '预约人',
                    width: '10%',
                }
                ,
                {
                    field: 'reserveTime',
                    title: '预约时间',
                    width: '10%',
                }
                , {
                    field: 'certificateType',
                    title: '证件类型',
                    width: '8%'
                }, {
                    field: 'idcard',
                    title: '证件号码',
                    width: '16%'
                },
                {
                    field: 'phone',
                    title: '手机号码',
                    width: '12%'
                },
                {
                    field: 'remark',
                    title: '备注',
                    width: '11%'
                },

                {
                    field: 'createTime',
                    title: '添加时间',
                    width: '15%'

                },
            ]
            ],
            request: {
                pageName: 'pageNumber', //页码的参数名称，默认：page
                limitName:
                    'pageSize',
            }
            ,
            response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,
                statusCode:
                    20000 //规定成功的状态码，默认：0
                ,
                msgName:
                    'msg' //规定状态信息的字段名称，默认：msg
                ,
                countName:
                    'total' //规定数据总数的字段名称，默认：count
                ,
                dataName:
                    'data', //规定数据列表的字段名称，默认：data
            }
            ,
            id: 'test',
            page:
                true,
            height:
                'auto',
            even:
                true,
            done:
                function (res, curr, count) {
                    console.log(res);
                    //是否有权限或权限是否失效
                    authorizeState();
                }
        });

    });


    function reload(value) {
        table.reload('test', {
            where: {
                nickname: $("input[name=nickname]").val(),
                name: $("input[name=name]").val(),
                idcard: $("input[name=idcard]").val(),
                phone: $("input[name=phone]").val(),
                reserveTime: $("input[name=reserveTime]").val(),
            }
        });
    }

</script>
</html>